<template>
  <div>
    <el-form :model="form" ref="form" name="basic" label-width="80px" autocomplete="off" style="margin-top: 10px;margin-left: 10px;">
      <el-row>
        <el-col :span="6">
          <CompanySelect :compName.sync="form.compName" />
        </el-col>
      </el-row>
    </el-form>


    <div style="margin-right: 15px;">
      <el-upload class="upload-demo" style="float: right;margin-bottom: 5px;" action="" :http-request="handleUpload1"
        :show-file-list="false">
        <el-button type="warning" size="mini">导入</el-button>
        <div slot="tip" class="el-upload__tip"></div>
      </el-upload>
      <el-button type="primary" style="float: right;margin-right: 10px;" size="mini" @click="clickDlTemp">导出</el-button>
      <el-button type="primary" style="float: right;margin-right: 10px;" size="mini" @click="clickAdd">新增</el-button>
      <el-button type="success" style="float: right;margin-bottom: 5px;margin-right: 10px;" size="mini"
        @click="clickQuery">查询</el-button>
    </div>
    <div style="padding: 10px 20px;">
      <el-table :data="tableData" :key="key" style="width: 100%;border: solid 1px #c0c0c0;" row-key="index"
        header-row-class-name="table_header" :row-class-name="tableRowClassName"
        :cell-style="{ borderColor: '#C0C0C0' }" border @cell-dblclick="doubleClick" id="out-table">
        <!-- <el-table-column v-for="column,index in columns" :key="index" :prop="column.dataIndex"
        :label="column.title" :align="column.align" :width="column.width">
      </el-table-column> -->
        <el-table-column prop="compName" label="企业名称" align="left" min-width="200px">
        </el-table-column>
        <el-table-column prop="scoreYear" label="年度" align="left" min-width="200px">
        </el-table-column>
        <el-table-column prop="score1" label="Jan" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score1"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score2" label="Feb" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score2"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score2 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score3" label="Mar" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score3"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score3 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score4" label="Apr" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score4"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score4 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score5" label="May" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score5"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score5 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score6" label="Jun" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score6"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score6 }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="score7" label="Jul" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score7"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score7 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score8" label="Aug" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score8"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score8 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score9" label="Sep" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score9"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score9 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score10" label="Oct" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score10"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score10 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score11" label="Nov" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score11"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score11 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="score12" label="Dec" align="center" min-width="50px">
          <template slot-scope="scope">
            <el-input v-focus v-if="scope.row[scope.column.property + 'Show']" clearable v-model="scope.row.score12"
              @keyup.enter.native="blurInput" @blur="onBlur(scope.row, scope.column)"></el-input>
            <span v-else>{{ scope.row.score12 }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column label="操作" width="110" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="danger"
              @click="clickDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>

    </div>
    <el-pagination background layout="prev, pager, next" :total="total_size" :page-size="100" :current-page="page_no">
    </el-pagination>

    <UpdateModal ref="UpdateModalRef" :clickQuery="clickQuery" :saveFun="updateCompScore" :addFun="addCompScore" />

    <el-dialog title="删除提示" :visible.sync="delVisible" width="30%">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import UpdateModal from './updateModal';
  import {
    queryCompScoreList,
    updateCompScore,
    addCompScore,
    delCompScore,
    importExcel,
  } from '@/service/compScore';
  import FileSaver from 'file-saver';
  import * as XLSX from 'xlsx';
  import columns from './table';
  // import { tableMixin } from '@/mixin/table';
  import CompanySelect from '@/components/CompanySelect';

  export default {
    components: { UpdateModal, CompanySelect },
    // mixins: [tableMixin],

    data() {
      return {
        data: [],
        key: Math.random(),
        pagination: {
          showLessItems: true,
          showQuickJumper: true,
          showSizeChanger: true,
        },
        query: {},
        columns: columns,
        currItem: {},
        page_no: 0,
        page_size: 100,
        form: {},
        tableLoading: false,
        tableData: [],
        total_size: 0,
        loading: false,
        updateCompScore,
        addCompScore,
        queryCompScoreList,
        delVisible: false,

      };
    },

    methods: {
      clickShowEdit(index, record) {
        this.$refs.UpdateModalRef.openEditDialog({ ...record });
      },
      clickAdd(record) {
        this.$refs.UpdateModalRef.openAddDialog();
      },
      clickDel(index, row) {
        this.delVisible = true;
        this.currItem = { ...row };
      },

      tableRowClassName({ row, rowIndex }) {
        if (row['isHouseOwner'] === 'Y') {
          console.log('warn');
          return 'warning-row';
        }
        return '';
      },

      getFD(fileObj) {
        const formData = new FormData();
        formData.append('file', fileObj.file);
        return formData;
      },
      clickDlTemp(index, row) {
        console.log('XLSX', XLSX, document.querySelector('#out-table'));
        var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'));
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array',
        });
        try {
          const date = new Date();
          let dateStr =
            date.getFullYear() +
            '-' +
            (date.getMonth() + 1) +
            '-' +
            date.getDate();
          FileSaver.saveAs(
            new Blob([wbout], {
              type: 'application/octet-stream',
            }),
            '企业得分-' + dateStr + '.xlsx'
          );
        } catch (e) {
          if (typeof console !== 'undefined') console.log(e, wbout);
        }
        return wbout;
      },

      blurInput(e) {
        e.target.blur()
      },
      doubleClick(row, column) {
        // 避免点击过快导致多个输入框处于焦点状态
        row[column.property + 'Show'] = false;
        // 避免点击其他单元格导致表格刷新

        console.log('column.property', column.property);
        if (
          ![
            'score1',
            'score2',
            'score3',
            'score4',
            'score5',
            'score6',
            'score7',
            'score8',
            'score9',
            'score10',
            'score11',
            'score12',
          ].includes(column.property)
        )
          return;
        row[column.property + 'Show'] = true;
        this.key = Math.random();
        console.log('row', row);
        // this.updateTable(row);
      },
      //输入框失焦事件
      onBlur(row, column) {
        row[column.property + 'Show'] = false;
        this.updateTable(row);
      },
      async saveData(row) {
        const res = await updateCompScore(row);
        if (res.success) {
          this.$message.success('保存成功');
        } else {
          this.$message.error('保存失败');
        }
        this.clickQuery();
      },

      //更新表格
      updateTable(row) {
        this.saveData(row);
      },

      async handleUpload1(fileObj) {
        const fd = this.getFD(fileObj);
        let res = await importExcel(fd);
        if (res.success) {
          this.clickQuery();
        }
        return false;
      },

      async handleDelete() {
        this.delVisible = false;
        const res = await delCompScore({
          ...this.currItem,
        });
        if (res.success) {
          this.clickQuery();
        } else {
        }
      },

      async clickQuery() {
        this.loading = true;
        const data = await queryCompScoreList({
          ...this.form,
          page_no: this.page_no,
          page_size: this.page_size,
        });
        if (data.success) {
          this.total_size = data.total;
          this.tableData = data.dataList;
        } else {
          this.total_size = 0;
          this.tableData = [];
        }
        this.loading = false;
      },

      // updateCompScore(){

      // }
    },
    created() {
      // const date = new Date();
      // const currMonth = date.getFullYear() + '-' + (date.getMonth() + 1);
      // this.$set(this.form, 'scoreMonth', currMonth);
      // this.form.scoreMonth = currMonth;
      // console.log('this.form.currMonth', this.form.currMonth);
    },

    mounted() {
      console.log('ff:' + this.tableData);
      console.log('ff11:' + this.clickQuery);

      this.clickQuery(queryCompScoreList);
    },
  };
</script>
<style scoped>
  /deep/ .table_header th {
    background-color: #e3e3e3 !important;
    height: 40px;
  }

  ::v-deep .el-table .el-table__cell {
    padding: 4px 0px;
  }

  ::v-deep .el-table .warning-row {
    color: red;
  }
</style>